<template>
	<div class="m_r">
		<header class="top_bar">
			<a onclick="window.history.go(-1)" class="icon_back"></a>
			<h3 class="cartname">我的合作伙伴</h3>
		</header>
		<div class="tab_header border_bot_bf line_height60 color666 background_fff padding_top45 margin_bot10">
			<span @click="TabSwitch(0)" :class="{active: tabContainerActive==='tab-container0'}">
				一级分销
			</span>
			<span @click="TabSwitch(1)" :class="{active: tabContainerActive==='tab-container1'}">
				二级分销
			</span>
			<span @click="TabSwitch(2)" :class="{active: tabContainerActive==='tab-container2'}">
				三级分销
			</span>
		</div>
		<mt-tab-container v-model="tabContainerActive">
			<mt-tab-container-item id="tab-container0">
				<div v-for="item in level_one" class="height80 background_fff pad10 margin_bot10">
					<div class="fl height60 width60 margin_right20">
						<img v-lazy="root+ item.HeadImg" class="width100" />
					</div>
					<div class="fl">
						<p class="line_height2">
							<span>一级分销：</span>
							<span>{{item.CellPhone}}</span>
						</p>
						<p class="line_height2">
							<span>注册时间：</span>
							<span>{{item.CreateDate}}</span>
						</p>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container1">
				<div v-for="item in level_two" class="height80 background_fff pad10 margin_bot10">
					<div class="fl height60 width60 margin_right20">
						<img v-lazy="root+ item.HeadImg" class="width100" />
					</div>
					<div class="fl">
						<p class="line_height2">
							<span>二级分销：</span>
							<span>{{item.CellPhone}}</span>
						</p>
						<p class="line_height2">
							<span>注册时间：</span>
							<span>{{item.CreateDate}}</span>
						</p>
					</div>
				</div>
			</mt-tab-container-item>
			<mt-tab-container-item id="tab-container2">
				<div v-for="item in level_three" class="height80 background_fff pad10 margin_bot10">
					<div class="fl height60 width60 margin_right20">
						<img v-lazy="root+ item.HeadImg" class="width100" />
					</div>
					<div class="fl">
						<p class="line_height2">
							<span>三级分销：</span>
							<span>{{item.CellPhone}}</span>
						</p>
						<p class="line_height2">
							<span>注册时间：</span>
							<span>{{item.CreateDate}}</span>
						</p>
					</div>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				root: this.root,
				tabContainerActive: 'tab-container0',
				level_one: [],
				level_two: [],
				level_three: [],
			}
		},
		mounted() {
			let _this = this
			_this.GetPartnerData()
		},
		methods: {
			TabSwitch: function(number) {
				let _this = this
				_this.tabContainerActive = 'tab-container' + number
			},
			GetPartnerData: function() {
				let _this = this
				_this.$http.get('/client/ChildMembers/level_one', null, localStorage.Authorization, res => {
					console.log('子阶1', res)
					if(res.code === 200) {
						_this.level_one = res.data.list
					} else if(res.code === 101) {
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
				_this.$http.get('/client/ChildMembers/level_two', null, localStorage.Authorization, res => {
					console.log('子阶2', res)
					if(res.code === 200) {
						_this.level_two = res.data.list
					} else if(res.code === 101) {
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
				_this.$http.get('/client/ChildMembers/level_three', null, localStorage.Authorization, res => {
					console.log('子阶3', res)
					if(res.code === 200) {
						_this.level_three = res.data.list
						console.log('_this.level_three', _this.level_three)
					} else if(res.code === 101) {
						_this.$router.push({
							path: '/wx/login'
						})
					}
				})
			}
		}
	}
</script>
<style scoped="scoped">
	.footer {
		display: none;
	}
	
	.fixBottomBox {
		display: none;
	}
	
	.tab_header span {
		width: 32.5%;
	}
	
	.tab_header span.active {
		border-bottom: 2px solid #f88041;
		color: #f88041;
	}
</style>